<template>
    
    <div>
        <div class="content">

            <div class="minTitle">
                <div class="flag"></div>
                <div class="text">拟参评符合人员列表</div>
                <div class="close" @click="$router.go(-1)"><i class="el-icon-close"></i></div>
            </div>

            <br/>

            <div class="content-table">
                <el-table
                        :data="tableData"
                        border
                        size="small"
                        style="width: 100%"
                        header-row-class-name="table-header">
                    <el-table-column
                            prop="userName"
                            label="姓名"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="curCategoryChildName"
                            label="现岗位"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="curAcademicName"
                            label="现职称等级"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="curAcademicDate"
                            label="现职称获取时间"
                            align="center">
                             <template slot-scope="scope">
                                 {{scope.row.curAcademicDate.substring(0,10)}}
                             </template>
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="拟参评职称等级"
                            align="center">
                            <template slot-scope="scope">
                                <span v-if='scope.row.academicType == "100"'>续任初职</span>
                                <span v-else-if='scope.row.academicType == "101"'>初职晋中职</span>
                                <span v-else-if='scope.row.academicType == "110"'>续任中职</span>
                                <span v-else-if='scope.row.academicType == "111"'>中职晋副高</span>
                                <span v-else-if='scope.row.academicType == "120"'>续任副高</span>
                                <span v-else-if='scope.row.academicType == "121"'>副高晋正高</span>
                                <span v-else-if='scope.row.academicType == "130"'>续任正高</span>
                                <span v-else-if='scope.row.academicType == "200"'>未知类型</span>
                            </template>
                    </el-table-column>
                    <el-table-column
                            prop="categoryChildName"
                            label="拟参评岗位"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="hasAcross"
                            label="是否符合"
                            align="center">
                            <template slot-scope="scope">
                                <span v-if="scope.row.firstCheckStatus==1">是</span>
                                <span v-else>否</span>
                            </template>
                    </el-table-column>
                    <el-table-column
                            label="详情"
                            align="center">
                        <template slot-scope="scope">
                            <el-button @click.stop="handleClick(scope.row)" type="text" size="small">查看</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="pagination">
                <el-pagination
                        background
                        layout="total,prev, pager, next"
                        @current-change="pageClick"
                        :total="total"
                        :page-size="pageSize"
                        >
                </el-pagination>
            </div>
        </div>

        <!-- 信息预览 -->
        <base-info-preview ref="infoPreview" class="infoPreview" :userName="userName" :userId="userId"></base-info-preview>

    </div>
</template>

<script>
    import {qaStandardRecordFindDetails,participationPeopleListPost } from '@/service/api'
    import { infoProcessing } from '../../service/personalInfoDataProcessing'
    import Qs from 'qs'
    export default {
        name: "personnelInfo",
        data() {
            return {
                formQuery: {
                    curAcademicName: '', // 现职称等级
                    recordTitle: '',     // 拟参评职称等级
                    categoryType: '',    // 目标岗位
                    hasPass:true,        // 是否符合条件： true 符合，false 不符合 null 全部
                },

                titlesTypeOptions:[],       // 职称名称列表
                academicTypeOptions:[],     // 拟参评职称等级列表
                categoryTypeListOptions:[], // 岗位列表

                tableData:[],
                pageNum:1,
                pageSize:12,
                total: 0,

                userName:"",
                 userId:'',
                allFieldList:[],
            }
        },
        created(){
            // 如果路由参数为空，则直接返回
            // if(JSON.stringify(this.$route.query) == "{}"){
            //     this.$router.go(-1);
            //     return;
            // }
            this.formQuery = this.$route.query;
            this.loadData();
        },
        methods:{
            loadData(){

                this.formQuery.pageNum = this.pageNum;
                this.formQuery.pageSize = this.pageSize;

                participationPeopleListPost(Qs.stringify(this.formQuery)).then(res => {
                    if(res.code == 200){
                        this.tableData = res.data.data;

                        this.pageNum = res.data.pageNum;
                        this.pageSize = res.data.pageSize;
                        this.total = res.data.total
                    }
                });
            },
            // 数据列表 - 翻页
            pageClick(e) {
                this.pageNum = e;
                this.loadData();
            },
            // 点击用户详情
            handleClick(e) {
                this.userName = e.userName
                this.handleInfoPreview(e.userId)
            },
            // 打开用户详情
            handleInfoPreview(userId){
               this.$refs.infoPreview.$el.style.display = "flex";
               this.userId = userId;
            },
           
        }
    }
</script>

<style scoped>

 .content{
    min-height: 520px;
    height: 100%;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 9px 8px 2px rgba(43, 103, 254, 0.05);
    border-radius: 5px;
    overflow: hidden;
    margin-right: 10px;
    padding:31px 38px;
}

.minTitle{
    display: flex;
    flex-direction: row;
    align-items: center;
    background: #31478f0d;
    padding: 14px 0px;
    border-top: solid 1px #f3f3f3;
    position:relative;
}
.minTitle>.flag{
    width: 3px;
    background: #31478F;
    margin: auto 22px;
    height: 18px;
}
.minTitle>.text{
    color: #31478F;
    font-weight: bold;
    font-size: 17px;

}

.close{
    position: absolute;
    right: 0px;
    padding: 0px 18px;
    cursor: pointer;
}
.close>i{
    font-size: 28px;
    font-weight: bold;
}


.form-query-box {
    height: 50px;
    margin: 26px 0px;
    margin-bottom: 38px;
    position: relative;
    /*overflow: hidden;*/
}
.form-query {
    margin-top: 20px;
}

.query-bar {
    margin-top: 18px;
    position: absolute;
    right: 30px;
}

.query-bar >>> .el-button {
    width: 80px;
}


.content-table {
    min-height: 410px;
    margin-top: 14px;
    border-radius: 5px 5px 0px 0px;
    overflow: hidden;
}

.content-table >>> .table-header th {
    background: #E6EAEB !important;
    border: none;
}
.content-table >>> .table-header th div{
    font-weight:bold !important;
    color: #333;
}

.content-table >>> tbody tr:nth-child(even) td {
    background: #F5F8FE;
}

.content-table >>> tbody .el-button {
    padding: 5px 15px;
}
.pagination{
    margin-top: 10px;
    text-align: end;
    padding-right: 16px;
}
.moduleName{
    background: #31478F;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: bold;
    padding: 11px 0px;
    text-align: center;
    color: white;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.warp >>> .el-table--small,
.warp >>> .el-button--small{
    font-size: 13px;
}
</style>
